:root {
  --chart-1: 173 58% 39%;
  --chart-2: 12 76% 61%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --chart-6: 340 65% 47%;
  --chart-7: 220 80% 30%;
  --chart-8: 190 70% 55%;
  --chart-9: 50 80% 40%;
  --chart-10: 10 90% 60%;
  --chart-11: 300 60% 70%;
  --chart-12: 25 95% 65%;
  --chart-13: 120 85% 50%;
  --chart-14: 210 75% 35%;
  --chart-15: 60 65% 80%;
  --chart-16: 210 60% 55%;
  --chart-17: 30 90% 70%;
  --chart-18: 240 50% 40%;
  --chart-19: 80 70% 50%;
  --chart-20: 290 65% 60%;
  --chart-21: 60 85% 30%;
  --chart-22: 320 75% 50%;
  --chart-23: 150 60% 70%;
  --chart-24: 170 80% 40%;
  --chart-25: 140 85% 55%;
  --chart-26: 110 75% 45%;
  --chart-27: 260 70% 50%;
  --chart-28: 200 60% 35%;
  --chart-29: 90 80% 55%;
  --chart-30: 130 70% 60%;
}

.dark {
  --chart-1: 220 70% 50%;
  --chart-5: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-2: 340 75% 55%;
  --chart-6: 200 60% 50%;
  --chart-7: 320 85% 40%;
  --chart-8: 100 70% 55%;
  --chart-9: 60 75% 60%;
  --chart-10: 330 80% 45%;
  --chart-11: 140 65% 65%;
  --chart-12: 50 85% 70%;
  --chart-13: 230 75% 55%;
  --chart-14: 90 80% 35%;
  --chart-15: 170 60% 75%;
  --chart-16: 220 65% 60%;
  --chart-17: 310 70% 55%;
  --chart-18: 250 60% 45%;
  --chart-19: 130 80% 50%;
  --chart-20: 80 85% 65%;
  --chart-21: 190 75% 55%;
  --chart-22: 70 70% 50%;
  --chart-23: 260 80% 40%;
  --chart-24: 160 65% 60%;
  --chart-25: 210 70% 35%;
  --chart-26: 100 75% 55%;
  --chart-27: 300 65% 45%;
  --chart-28: 180 80% 50%;
  --chart-29: 240 60% 55%;
  --chart-30: 110 85% 70%;
}

html, body {
  height: 100%;
}

.chart-pie .recharts-legend-wrapper {
  margin-top: 0;
}

.recharts-legend-wrapper {
  margin-top: -12px;
}